<template>
	<view class="cu-card article no-card" >
		<my-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">分类列表</block>
		</my-header>
        <view class="cu-bar bg-red search" v-if="1==2">
			<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
			<view class="action">
				<text>筛选</text>
				<text class="cuIcon-triangledownfill"></text>
			</view>
		</view>
        <scroll-view scroll-x class="bg-red nav "  scroll-with-animation :scroll-left="scrollLeft">
			<view class="flex text-center" >
                <view class="cu-item flex-sub" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in classifyList" :key="index" @tap="tabSelect" :data-id="index">
                    {{item.name}}
                </view>
			</view>
		</scroll-view>
		
		<view class="artList">
			<!-- <view>index:{{TabCur}}</view>
			<view>id:{{classifyList[TabCur].id}}</view>
			<view>name:{{classifyList[TabCur].name}}</view> -->
			
			<view class="cu-card case no-card" :class="isCard?'no-card':''">
				<block v-for="(item,index) in artList" :key="index">
					<view class="cu-item shadow" style="margin-top:20rpx;" @click="goDetails(item)" >
					<view class="image">
						<image :src="item.main_img" mode="widthFix"></image>
						<!-- <block v-for="(items,index) in item.tag_list" :key="index">
							<view class="cu-tag bg-blue">{{item.tag_list[index]}}</view>
						</block> -->
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
							<view class="content flex-sub">
								<view class="text-grey">{{item.nickName}}</view>
								<view class="text-gray text-sm flex justify-between">
									发布时间：{{item.add_time}}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.view}}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.zan}}
										<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.ping.length}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				artList:[],
                scrollLeft:0,
                TabCur:0,
				classifyList:[],
			}
		},
		onLoad(opt) {
			console.log(opt.id);
            this.id=opt.id
            this.initData()
		},
		methods: {
			async initData(id){
				const res=await uni.$request({
				},"api/art/getclassify")
				this.classifyList=res.data
				this.getArt(res.data[0].id)
			},
			async getArt(classify){
				const res=await uni.$request({
					classify
				},"api/art/getlist")
				if (res.code==200) {
					this.artList=res.data
				}
			},
			goDetails(item){
                let url= "/pages/article/article?id="+item.id
                if (item.link) {
                    url="/pages/webview/webview?link="+item.link
				}
				console.log(url);
                uni.$go(url);
            },
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.getArt(this.classifyList[this.TabCur].id)
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
			
		}
	}
</script>

<style lang="scss">
	// @import "./index";
	.wrap{
		margin:10rpx 25rpx;
	}
	.title{
		height: 80rpx;
		padding: 0 25rpx;
	}
	.codeList{
		.copy{
			width: auto;
			padding: 0 40rpx;
			border-radius: 40rpx;
			height: 60rpx;
			font-size: 26rpx;
			background: $main_col;
			color: #fff;
			margin-right: 20rpx;
		}
	}
</style>